
<!DOCTYPE html
		PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="Game.css"/>
	<!-- script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
	<script type="text/javascript" src="Timeout.js"></script>
	<script type="text/javascript" src="Rules.js"></script>
	<script type="text/javascript" src="Enhancements.js"></script>
	<script type="text/javascript" src="Effects.js"></script>
	<script type="text/javascript" src="Abilities.js"></script>
	<script type="text/javascript" src="Characters.js"></script>
	<script type="text/javascript" src="countdown.jquery.js"></script>
	<script>
var Log = function(params) {
	$log.trigger('log', params);
};
var $log = $(Log);

(function($){
$(function(){
	$log
		.bind('log', function(e, msg) {
			switch ( msg.type ) {
			case 'Enhancements.Collection.Add' :
				var enhancement = msg.enhancement;
				var $enhancement = $enhancement_tpl.clone();
				$enhancement
					.appendTo($enhancements)
					.addClass(enhancement.Id);
				$('.name', $enhancement)
					.html(enhancement.Name);
				$('.stacks', $enhancement)
					.html(enhancement.Stacks);
			break;
			case 'Enhancements.Enhancement.AddStacks' :
			case 'Enhancements.Enhancement.RemoveStacks' :
				var enhancement = msg.enhancement;
				var $enhancement = $('.enhancement.' + enhancement.Id, $enhancements);
				$('.stacks', $enhancement)
					.html(enhancement.Stacks);
			break;
			case 'Enhancements.Collection.Remove' :
				var enhancement = msg.enhancement;
				var $enhancement = $('.enhancement .' + enhancement_name, $enhancements);
				$enhancement.remove();
				delete $enhancement[0];
			break;
			case 'Characters.Character.QueueAbility' :
				$queue_abilities
					.attr({className: ''})
					.addClass('ability')
					.find('.name')
						.html('');

				for ( var i = 0; i < msg.Item.Caster.Queue.length; i++ ) {
					var ability = msg.Item.Caster.Queue[i];
					var $qability = $queue_abilities.slice(i, i + 1);
					$qability
						.addClass(ability.Id)
						.find('.name')
							.html(ability.Name);
				}
			break;
			case 'Characters.Character.ClearQueue' :
				$queue_abilities
					.attr({className: ''})
					.addClass('ability')
					.find('.name')
						.html('');
			break;
			case 'Effects.Collection.Add' :
				var effect = msg.effect;
				$buff = $buff_tpl.clone();
				buffs[effect.UniqueId] = $buff;
				$buff.find('.name').html(effect.Name);
				$buff.find('.time')
					.html(effect.Duration)
					.countdown();
				$buff.find('.stacks').html(effect.Stacks);
				$buff.appendTo($buffs);
			break;
			case 'Effects.Effect.Fade' :
				var effect = msg.effect;
				buffs[effect.UniqueId].remove()
				delete(buffs[effect.UniqueId]);
			break;
			case 'Characters.Character.ClearQueue' :
				$hp.html(msg.character.HitPoints);
			break;
			default :
				console.log(msg);
			}
		});

	var chars = new Characters.Collection();
	var chr = chars.Add(Characters.Toons.Maclovio);
	var enm = chars.Add(Characters.Toons.Mobby);
	var $canvas = $('#canvas');
	var $char = $('#templates .character').clone();
	$canvas.prepend($char);

	chr.Target = enm;

	var $hp = $('.hp', $char);
	$hp.html(chr.HitPoints);

	var $abilities = $('.abilities', $char);
	var $ability_tpl = $('.ability', $abilities);
	$ability_tpl.remove();
	for ( var key in chr.Moves.Items ){
		var item = chr.Moves.Items[key];
		var $ability = $ability_tpl.clone();
		$('.name', $ability).html(item.Name);
		$ability
			.bind('click', (function(itm) {
				return function() {
					chr.QueueAbility(itm.Name);
				};
			})(item))
			.addClass(item.Id)
			.appendTo($abilities);
	}

	var $queue = $('.queue', $char);
	var $qability_tpl = $('.ability', $queue);
	$qability_tpl.remove();
	for ( var i = 1; i <= chr.MaxQueue; i++ ){
		var $ability = $qability_tpl.clone();
		$ability
			.appendTo($queue);
	}
	var $queue_abilities = $('.ability', $queue);

	var $apply_target = $('.apply .target', $char)
		.bind('click', function() {
			chr.ApplyQueue();
		});

	var $apply_self = $('.apply .self', $char)
		.bind('click', function() {
			chr.ApplyQueue('self');
		});

	var $enhancements = $('.enhancements', $char);
	var $enhancement_tpl = $('.enhancement', $enhancements);
	$enhancement_tpl.remove();
	var enhancements = {};
	for ( var i = 1; i <= chr.EnhancementCount; i++ ){
		var $enhancement = $enhancement_tpl.clone();
		$enhancement
			.appendTo($enhancements);
	}

	var buffs = [];
	var $buffs = $('.buffs', $char);
	var $buff_tpl = $('.buff', $buffs);
	$buff_tpl.remove();
})
})(jQuery);

	</script>
	<title>Game</title>
</head>
<body id="home" class="">

<div id="canvas">
	<div id="combat_log">

	</div>

	<div id="templates">
		<div class="character">
			<div class="name"></div>
			<div class="hp"></div>
			<div class="mp"></div>
			<div class="abilities">
				<div class="ability">
					<span class="name"></span>
					<span class="hotkey"></span>
				</div>
			</div>
			<div class="enhancements">
				<div class="enhancement">
					<span class="name"></span>
					<span class="stacks"></span>
				</div>
			</div>
			<div class="buffs">
				<div class="buff">
					<span class="name"></span>
					<span class="stacks"></span>
					<span class="time"></span>
				</div>
			</div>
			<div class="debuffs">
				<div class="debuff">
					<span class="name"></span>
					<span class="stacks"></span>
					<span class="time"></span>
				</div>
			</div>
			<div class="queue">
				<div class="ability">
					<span class="name"></span>
				</div>
			</div>
			<div class="apply">
				<div class="target">Target</div>
				<div class="self">Self</div>
				<div class="aoe">AOE</div>
			</div>
		</div>
	</div>
</div>

</body>
</html>